<template>
  <div class="container">
    <el-card class="employee-container">
      <!-- 头部 -->
      <el-row type="flex" justify="center" align="middle">
        <el-col>
          <el-button type="primary" size="medium" @click="addEmployee">
            新建员工
          </el-button>
        </el-col>
      </el-row>
      <el-divider />
      <el-table
        :data="employeeList"
        style="width: 100%"
        border=""
      >
        <el-table-column
          prop="username"
          label="用户名"
          width="400"
        />
        <el-table-column
          prop="email"
          label="邮箱"
          width="400"
        />
        <el-table-column
          prop="address"
          label="操作"
        >
          <template slot-scope="scope">
            <!-- 设置角色 -->
            <el-button
              size="small"
              type="primary"
              @click="setRoles(scope.row)"
            >设置角色</el-button>
            <el-button
              size="small"
              @click="handleEdit( scope.row)"
            >编辑</el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row
        type="flex"
        justify="center"
        align="middle"
        style="height: 60px"
      >
        <!-- 分页组件 -->
        <el-pagination v-if="employeeList[0]" layout="prev,pager,next" :total="total" :page-size="getPage._limit" :current-page="currentPage" @current-change="currentChange" />
      </el-row>
    </el-card>
    <el-dialog
      title="新增"
      :visible.sync="isShowDialog"
      width="40%"
      @close="btnCancel"
    >
      <!-- 新建用户 -->
      <el-form ref="rulesForm" label-width="80px" :model="userInfo" :rules="rules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userInfo.username" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userInfo.email" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userInfo.password" show-password />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="btnCancel">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="设置角色"
      :visible.sync="centerDialogVisible"
      width="40%"
      center
    >
      <el-row type="flex" justify="center" align="middle">
        <!-- 多选框 -->
        <el-checkbox-group v-model="checkList">
          <el-checkbox v-for="item in rolesList" :key="item.id" :label="item.id">{{ item.title }}</el-checkbox>
        </el-checkbox-group>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="roleBtnOk">确 定</el-button>
      </span>
    </el-dialog>
    <addRoles ref="addRoles" :is-role-dialog="isRoleDialog" />
  </div>
</template>

<script>
import axios from 'axios'
import { getUsers, getUsersCount, getUsersById, setUsers, delUsers } from '@/api/employees'
import { getRoles } from '@/api/roles'
import addRoles from './components/addRoles.vue'
export default {
  components: {
    addRoles
  },
  data() {
    return {
      employeeList: [],
      getPage: {
        _limit: 2,
        _start: 0
      },
      total: 0,
      isRoleDialog: false,
      currentPage: 1,
      isShowDialog: false,
      centerDialogVisible: false,
      userInfo: {
        username: '',
        email: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { pattern: '^\\s*\\w+(?:\\.{0,1}[\\w-]+)*@[a-zA-Z0-9]+(?:[-.][a-zA-Z0-9]+)*\\.[a-zA-Z]+\\s*$', message: '请输入正确的邮箱' }
        ],
        password: [
          { required: true, message: '密码', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ]
      },
      rolesId: '',
      setroles: {
        id: '',
        username: '',
        email: '',
        image: '',
        roles: []
      },
      checkList: [],
      rolesList: [],
      rolesRules: {
        title: [],
        description: []
      }
    }
  },
  async created() {
    //   获取员工列表
    this.getEmploy()
    // 获取员工数量
    this.getCount()
    // 获取角色列表
    const data = await getRoles()
    console.log(150, data)
    this.rolesList = data
  },
  methods: {
    //   获取员工列表
    async getEmploy() {
      const data = await getUsers(this.getPage)
      this.employeeList = data
      console.log(138, data)
    },
    // 获取员工数量
    async getCount() {
      const data = await getUsersCount()
      this.total = data
    },
    // 切换分页
    currentChange(page) {
      this.currentPage = page
      console.log(page)
      this.getPage._start = (this.currentPage - 1) * this.getPage._limit
      //   获取员工列表
      this.getEmploy()
    },
    // 新建员工
    addEmployee() {
      this.isShowDialog = true
    },
    // 取消
    btnCancel() {
      this.userInfo = {
        username: '',
        email: '',
        password: ''
      }
      this.$refs.rulesForm.resetFields()
      this.isShowDialog = false
    },
    // 确认
    async btnOk() {
      try {
        //   注册
        await axios({
          url: 'http://120.24.171.137:1337/auth/local/register',
          method: 'post',
          data: this.userInfo
        })
        this.getEmploy()
        this.getCount()
        this.isShowDialog = false
      } catch (error) {
        this.$message({
          message: '用户名或者邮箱已经存在',
          type: 'warning'
        })
      }
    },
    // 设置角色
    async setRoles(data) {
    //   console.log(231, data)
      this.rolesId = data.id
      const res = await getUsersById(data.id)
      console.log(res, 230)
      this.setroles = res
      const checkList = res.roles.map(item => item.id)
      this.checkList = checkList
      this.centerDialogVisible = true
    },
    // 确定设置角色
    async roleBtnOk() {
      //   发送编辑请求
      console.log(this.checkList, 240)
      const data = {
        id: this.rolesId,
        roles: this.checkList
      }
      await setUsers(data)
      this.centerDialogVisible = false
      //   获取员工列表
      this.getEmploy()
    },
    // 编辑角色
    async handleEdit(data) {
      this.$refs.addRoles.getEmploy(data)
      this.isRoleDialog = true
    },
    // 删除角色
    async handleDelete(data) {
      await this.$confirm('此操作删除该数据, 是否继续?')
      if (this.employeeList.length === 1) {
        this.currentPage--
        this.currentChange(this.currentPage)
      }
      await delUsers(data.id)
      //   获取员工数量
      this.getCount()
      //   获取员工列表
      this.getEmploy()
      this.$message({
        message: '删除成功',
        type: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}
.main-container {
    // padding: 20px;
    width: 100%;
    margin-left: 0;
    // background-color: #666;
    .employee-container {
      padding: 20px;
    }
}
// .radio {
//     display: flex;
//     flex-wrap: wrap;
//     justify-content: start;
// }
</style>
